@use "../../assets/scss/mixins/base" as mx;

$n: 20;
$si: 500px;
$ti: 2s;

body {
  background-color: #333;
}

.frame {
  position: absolute;
  @include mx.abs;
  @include mx.rect($si, $si, white);
  overflow: hidden;
  margin: $si * -0.5;
  box-shadow: 0 0 0 1px black;
  .circle {
    $w: calc($si / $n * 1.8);
    @include mx.circle($w, unset);
    box-shadow: 0 0 0 1px transparentize(black, 0.8);
    margin: calc(($si / $n) * -0.9);
    animation: rotate $ti linear infinite;
    &::before {
      content: "";
      @include mx.abs(0, 50%);
      @include mx.circle($si * 0.012, black);
      margin: $si * -0.006;
    }
  }
  .row {
    @for $i from 1 through $n {
      &:nth-child(#{$i}) {
        position: absolute;
        top: calc($si / ($n - 1) * ($i - 1));
      }
      .circle:nth-child(#{$i}) {
        position: absolute;
        top: 0;
        left: calc($si / ($n - 1) * ($i - 1));
      }
      @for $j from 1 through $n {
        &:nth-child(#{$i}) .circle:nth-child(#{$j}) {
          animation-delay: calc(
            ($ti / $n * $i * -1.5) + ($ti / $n * $j * -1.5)
          );
        }
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
